import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../router/routers.dart';


import 'login_logic.dart';

class LoginPage extends StatelessWidget {
  LoginPage({Key? key}) : super(key: key);

  final LoginLogic logic = Get.put(LoginLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Get.back(),
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 32.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 40.h),
              Text(
                '欢迎登录',
                style: TextStyle(
                  fontSize: 40.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 8.h),
              Text(
                '请使用手机号和密码登录',
                style: TextStyle(
                  fontSize: 25.sp,
                  color: Colors.grey,
                ),
              ),
              SizedBox(height: 40.h),
              _buildPhoneInput(),
              SizedBox(height: 24.h),
              _buildPasswordInput(),
              SizedBox(height: 40.h),
              _buildLoginButton(),
              SizedBox(height: 20.h),
              _buildRegisterButton(),
              SizedBox(height: 20.h),
              _buildExtraOptions(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPhoneInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '手机号',
          style: TextStyle(
            fontSize: 25.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.phoneController,
          keyboardType: TextInputType.phone,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
            LengthLimitingTextInputFormatter(11),
          ],
          onChanged: logic.onPhoneChanged,
          decoration: InputDecoration(
            hintText: '请输入手机号',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            errorText: logic.phoneErrorText.value.isNotEmpty
                ? logic.phoneErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 25.sp),
          ),
        )),
      ],
    );
  }

  Widget _buildPasswordInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '密码',
          style: TextStyle(
            fontSize: 25.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.passwordController,
          obscureText: !logic.showPassword.value,
          onChanged: logic.onPasswordChanged,
          decoration: InputDecoration(
            hintText: '请输入密码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            suffixIcon: IconButton(
              icon: Icon(
                logic.showPassword.value
                    ? Icons.visibility
                    : Icons.visibility_off,
                color: Colors.grey,
              ),
              onPressed: () => logic.showPassword.toggle(),
            ),
            errorText: logic.passwordErrorText.value.isNotEmpty
                ? logic.passwordErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 25.sp),
          ),
        )),
      ],
    );
  }

  Widget _buildLoginButton() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 50.w),
      child: ElevatedButton(
        onPressed: () {
          if (logic.validateLogin()) {
            Get.snackbar('登录成功', '欢迎回来',
                snackPosition: SnackPosition.BOTTOM,
                backgroundColor: Colors.green,
                colorText: Colors.white);
          }
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF009FE8),
          minimumSize: Size(double.infinity, 80.h),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(45.r),
          ),
          elevation: 3,
        ),
        child: Text(
          '登录',
          style: TextStyle(
            fontSize: 34.sp,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  Widget _buildRegisterButton() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 50.w),
      child: ElevatedButton(
        onPressed: () {
          AppRoutes.jumpPage(AppRoutes.registerPage);
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF009FE8),
          minimumSize: Size(double.infinity, 80.h),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(45.r),
          ),
          elevation: 3,
        ),
        child: Text(
          '创建账号',
          style: TextStyle(
            fontSize: 34.sp,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  Widget _buildExtraOptions() {
    return Obx(() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Transform.scale(
            scale: 1.0,
            child: Checkbox(
              value: logic.rememberMe.value,
              onChanged: (bool? value) {
                logic.rememberMe.value = value ?? false;
                if (value ?? false) {
                  logic.saveUserDetails(
                      logic.phoneController.text,
                      logic.passwordController.text
                  );
                } else {
                  logic.clearSavedUserDetails();
                }
              },
            ),
          ),
          Text(
            '记住我',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 28.sp,
            ),
          ),
          const Spacer(),
          TextButton(
            onPressed: () {
              AppRoutes.jumpPage(AppRoutes.forgotPasswordPage);
            },
            child: Text(
              '找回密码',
              style: TextStyle(
                color: Colors.blue,
                fontSize: 28.sp,
              ),
            ),
          ),
        ],
      );
    });
  }
}